<template>
	<view class="mainPage withdrawal" >
		<public-head :title="title"></public-head>
		<view class="withdrawalcard" @click="cardshow=true">
			<view>提现到</view>
			<view class="bankcard">
				<view>
					<text v-if="bankcardlist.length">
						{{bank_name}} ({{compact_bank_name}} )
					</text>
					<image src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng/img/medical/seekDoctor/yuyuejiantou.png"></image>
				</view>
			</view>
		</view>
		<view class="amount">
			<view class="title">提现金额</view>
			<view class="price">
				<view class="identifier">￥</view>
				<view class="input">
					<input placeholder="请输入金额，单笔不能低于5元" placeholder-style="font-size: 28rpx;color: #909090;" type="digit" v-model="money" @input="checkinput" />
				</view>
			</view>
			<view class="canwith">
				可提现金额 ￥{{tomoney}}<text @click="whole">全部提现</text>
			</view>
		</view>
		<view class="rule">
			<view class="title">提现规则：</view>
			<view class="title" v-for="(item,index) in institution.config_str" :key="index">{{index+1}} . {{item}}</view>
			<!-- <view class="title">2.提现费率为0.2%</view> -->
		</view>
		<view class="but">
			<button class="active" v-if="money>=5&&money<=tomoney&&bank_name!=''" @click="Submit">提交</button>
			<button v-else @click="submits">提交</button>
		</view>
		<!--  -->
		<u-popup v-model="cardshow" border-radius="16" mode="bottom" :closeable="true">
			<view class="bulletframe">
				<view class="choicecard">选择银行卡</view>
				<view class="bankcard" v-for="(item,index) in bankcardlist" :key="index" @click="checks(index,item)">
					<view class="cardnumber">{{item.bank_name}}（{{item.compact_bank_name}}）</view>
					<view class="img">
						<image v-if="check==index" src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/choicecard.png"></image>
					</view>
				</view>
				<view class="bankcard" @click="toaddcard">
					<view class="cardnumber">
						<image class="image1" src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/icon_add.png"></image>
						添加银行卡
					</view>
					<view class="imgs">
						<image class="image2" src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng/img/medical/seekDoctor/yuyuejiantou.png"></image>
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup class="u-popup" v-model="withdrawalshow" mode="center" border-radius="14" :closeable="true" width="670rpx" height="460rpx">
			<scroll-view scroll-y="true">
				<view class="popuptitle">请输入验证码</view>
				<view class="price">￥{{Arrival}}</view>
				<view class="rate">
					<view class="title">费率</view>
					<view class="title">{{ServiceCharge}}%</view>
				</view>
				<view class="rate">
					<view class="title">手续费</view>
					<view class="title">{{brokerage}}
						<text v-if="brokeragest==1">(最低￥0.10)</text>
					</view>
				</view>
				<view class="verifymobile">{{bank_phone}}</view>
				<view class="form">
					<view>
						<wakary-input type="box" @finish="finishedOne"></wakary-input>
					</view>
				</view>
			</scroll-view>
		</u-popup>
	</view>
</template>
<script>
var that
import publicHead from "@/components/publicHead/publicHead.vue"
export default {
	components: {
		publicHead
	},
	data() {
		return {
			title: "提现",
			money: '',
			tomoney: '',//传过来的余额
			Arrival: '',//展示到账金额
			brokerage: '',//手续费
			cardshow: false,
			bankcardlist: '',
			name: '',
			bank_name: '',
			compact_bank_name: '',
			bank_phone: '',
			withdrawalshow: false,
			check: 0,
			id: '',
			ServiceCharge: '',//提现费率
			relation: '',
			institution: '',//提现规则
			page: 1,
			brokeragest: 0,
		}
	},
	onLoad(e) {
		that = this
		that.name = e.name
		that.tomoney = Number(e.tomoney)
		that.system()
	},
	onShow() {
		that.banklist()
	},
	methods: {
		toaddcard() {
			uni.navigateTo({
				url: 'addcard?name=' + that.name
			})
		},
		banklist() {
			that.$postAjax1('Doc_Cash_getBackList', {
				page: that.page,
				limit: 10,
			}, function (data) {
				that.bankcardlist = data.data.data
				if (that.bankcardlist.length > 0) {
					that.bank_name = that.bankcardlist[0].bank_name
					that.compact_bank_name = that.bankcardlist[0].compact_bank_name
					that.bank_phone = that.bankcardlist[0].bank_phone
					that.id = that.bankcardlist[0].id
				}
				console.log('银行卡', that.bankcardlist)
			})
		},
		checks(index, item) {
			that.check = index
			that.bank_name = item.bank_name
			that.compact_bank_name = item.compact_bank_name
			that.bank_phone = item.bank_phone
			that.id = item.id
			that.cardshow = false
			console.log('index', index)
		},
		Submit() {
			if (Number(that.money) > Number(that.institution.config.MaxMoney)) {
				console.log('111', typeof (Number(that.money)), '222', typeof (Number(that.money)))
				uni.showToast({
					title: '单笔最大提现金额为' + that.institution.config.MaxMoney,
					icon: 'none',
					duration: 2000
				});
				return
			}
			that.brokerage = (Number(that.money) * that.ServiceCharge / 100).toFixed(2)
			if (that.brokerage < 0.1) {
				that.brokerage = 0.1.toFixed(2)
				that.brokeragest = 1
			} else {
				that.brokeragest = 0
			}
			//输入提现金额加手续费
			var moneybro = Number(that.money) + Number(that.brokerage)
			console.log('数据类型', 'money', typeof (that.money), 'tomoney', typeof (that.tomoney), 'brokerage', typeof (that.brokerage), 'moneybro', typeof (moneybro))
			console.log('手续费', that.brokerage)
			if (moneybro <= Number(that.tomoney)) {
				that.Arrival = parseFloat(that.money).toFixed(2)
				console.log('展示的到账金额1', that.Arrival, moneybro)
			} else if (moneybro > Number(that.tomoney)) {
				that.Arrival = (that.money - that.brokerage).toFixed(2)
				console.log('展示的到账金额2', that.Arrival, moneybro)
			}
			that.withdrawalshow = true
			that.$postAjax1('Doc_Cash_getCashCode', {
				back_id: that.id
			}, function (data) {
				console.log('获取验证码成功')
			})
		},
		submits() {
			if (that.bank_name == '') {
				uni.showToast({
					title: '请选择银行卡',
					icon: 'none',
					duration: 2000
				});
			} else if (that.money == '') {
				uni.showToast({
					title: '请输入提现金额',
					icon: 'none',
					duration: 2000
				});
			} else if (Number(that.money < 5)) {
				uni.showToast({
					title: '单笔提现金额不得小于5元',
					icon: 'none',
					duration: 2000
				});
			} else if (Number(that.money) > Number(that.tomoney)) {
				uni.showToast({
					title: '提现金额不得大于余额',
					icon: 'none',
					duration: 2000
				});
			}
		},
		finishedOne(val) {
			that.codes = val
			console.log(val)
			if (that.codes.length == 6) {
				that.$postAjax1('Doc_Cash_upCash', {
					back_id: that.id,
					code: that.codes,
					money: that.money
				}, function (data) {
					that.relation = data.data.data
					uni.hideKeyboard();
					that.withdrawalshow = false
					uni.navigateTo({
						url: 'application?relation=' + that.relation
					})
					uni.showToast({
						title: '提现成功',
						icon: 'none',
						duration: 2000
					});
					console.log('提现成功')
				})
				that.withdrawalshow = false

			}
		},
		//全部提现
		whole() {
			that.money = that.tomoney
		},
		//提现规则
		system() {
			that.$postAjax1('Doc_Cash_getCashConfig', {
			}, function (data) {
				that.institution = data.data.data
				that.ServiceCharge = that.institution.config.ServiceCharge
			})
		},
		checkinput(e) {
			e.target.value = (e.target.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null
			//重新赋值给input
			that.$nextTick(() => {
				that.money = e.target.value
			})
		}
	},
}
</script>
<style scoped lang="scss">
.withdrawal {
	padding: 24rpx 32rpx;
	background-color: #f4f4f4;
	min-height: 100vh;
	.withdrawalcard {
		display: flex;
		justify-content: space-between;
		font-size: 32rpx;
		color: #323232;
		background-color: #ffffff;
		padding: 34rpx 32rpx;
		box-shadow: 2rpx 2rpx 2rpx 0px rgba(0, 0, 0, 0.18);
		border-radius: 16rpx;
		.bankcard {
			image {
				width: 12rpx;
				height: 20rpx;
				margin-left: 16rpx;
			}
		}
	}
	.amount {
		background: #ffffff;
		box-shadow: 2rpx 2rpx 2rpx 0px rgba(0, 0, 0, 0.18);
		border-radius: 16rpx;
		padding: 0 32rpx;
		margin-top: 16rpx;
		.title {
			font-size: 32rpx;
			color: #323232;
			padding: 32rpx 0;
		}
		.price {
			font-size: 32rpx;
			color: #323232;
			padding: 22rpx 0;
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid #f0f0f0;
			.identifier {
				font-size: 32rpx;
				font-weight: 600;
				color: #323232;
			}
			.input {
				margin-left: 32rpx;
				width: 550rpx;
			}
		}
		.canwith {
			color: #909090;
			font-size: 28rpx;
			padding: 22rpx 0 32rpx 0;
			text {
				color: #6496ff;
				margin-left: 16rpx;
			}
		}
	}
	.rule {
		padding: 20rpx 28rpx;
		font-size: 26rpx;
		color: #909090;
		.title {
			padding: 4rpx 0;
		}
	}
	.but {
		margin-top: 80rpx;
		button {
			background: #c4c4c6;
			border-radius: 46rpx;
			font-size: 32rpx;
			color: #ffffff;
			line-height: 92rpx;
		}
		.active {
			background: #ff8f2b;
		}
	}
	.bulletframe {
		// margin-bottom: 144rpx;
		padding-bottom: 144rpx;
		.choicecard {
			text-align: center;
			font-weight: 600;
			color: #1e1e1e;
			font-size: 40rpx;
			padding: 40rpx;
		}
		.bankcard {
			display: flex;
			justify-content: space-between;
			padding: 34rpx 40rpx;
			.cardnumber {
				font-size: 30rpx;
				color: #1e1e1e;
				.image1 {
					width: 30rpx;
					height: 32rpx;
					margin-right: 16rpx;
				}
			}
			.img {
				image {
					width: 36rpx;
					height: 28rpx;
				}
			}
			.imgs {
				.image2 {
					width: 12rpx;
					height: 20rpx;
				}
			}
		}
	}
	.u-popup {
		.anniu-box {
			background-color: transparent;
			padding: 0 22rpx 0rpx;
			margin-bottom: 50rpx;
			.queren {
				width: 100%;
				height: 106rpx;
				background: #efefef;
				border-radius: 12rpx;
				text-align: center;
				font-size: 32rpx;
				font-weight: 400;
				// color: #E02020;
				line-height: 106rpx;
				margin-bottom: 16rpx;
			}
			.quxiao {
				width: 100%;
				height: 106rpx;
				background: #efefef;
				border-radius: 12rpx;
				text-align: center;
				font-size: 32rpx;
				font-weight: 400;
				line-height: 106rpx;
				// color: #2F78F3;
			}
		}
		.popuptitle {
			text-align: center;
			font-size: 30rpx;
			color: #1e1e1e;
			margin-top: 40rpx;
		}
		.price {
			text-align: center;
			color: #323232;
			font-size: 48rpx;
			margin: 10rpx 0rpx;
		}
		.rate {
			display: flex;
			justify-content: space-between;
			padding: 0 32rpx;
			margin-bottom: 15rpx;
			.title {
				color: #323232;
				font-size: 28rpx;
			}
		}
		.verifymobile {
			font-size: 28rpx;
			color: #909090;
			margin-top: 20rpx;
			// text-align: center;
			margin-left: 32rpx;
		}
		.form {
			margin: 16rpx 32rpx 0 32rpx;
		}
	}
}
</style>
